<template>
  <div class="app-table">
    <!-- 瑕疵表单 -->
    <el-table
      :data="defectData"
      style="width: 100%;"
      :header-cell-style="{
        background: '#e9e7e7',
        color: '#246177',
        height: '36px',
      }"
      height="97%"
    >
      <template slot="empty">
        <div class="empty_tips">
          <el-empty class="empty_tips" :image-size="200" description="暂无数据"></el-empty>
        </div>
      </template>
      <el-table-column
        prop="machinecode"
        label="机器编码"
        width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="reelnum" label="卷号" width="80" align="center">
      </el-table-column>
      <el-table-column prop="area" label="瑕疵面积" width="80" align="center">
      </el-table-column>
      <el-table-column
        prop="defecparamname"
        label="瑕疵名字"
        width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="xaxis"
        label="瑕疵x坐标"
        width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="yaxis"
        label="瑕疵y坐标"
        width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="date" label="瑕疵日期" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.date | timeFilter }}
        </template>
      </el-table-column>
      <el-table-column
        prop="imagename"
        label="瑕疵图片"
        width="80"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="showPic(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 瑕疵图片 -->
    <el-dialog title="瑕疵图片" :visible.sync="openPic" width="36%">
      <el-image style="width: 100%; height: auto" :src="this.url"> </el-image>
    </el-dialog>
  </div>
</template>

<script>
import * as api from './api.js'
import moment from "moment";
export default {
  name: "defectTable",
  props: {
    defectData: Array,
  },
  data() {
    return {
      openPic: false,
      url: '',
    };
  },
  methods: {
    // 图片详情
    showPic(row) {
      this.openPic = true;
      var str = row.imagepath + row.imagename;
      this.url = api.defectImageUrl(str);
    },
  },
  filters: {
    timeFilter(val) {
      return moment(val * 1).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>

<style scoped lang="scss">
.app-table {
  margin-top: 7px;
  width: 100%;
  height: 100%;
}
.empty_tips{
  align-items: center;
  justify-content: center;
  // margin-left: 10px;
  height: 100%;
  width: 100%;
}
::v-deep .el-table__empty-block{
  margin-left: 20%;
}


</style>
